<template>
  <view class="page">
    <view class="nav" v-if="1">
      <view class="tab-item">
        <!-- <view class="tab-year" @click="tabSelect">
          {{ tabName ? tabName : "专业名称" }}
          <u-icon name="arrow-down-fill" color="#666" size="10"></u-icon>
        </view> -->

        <view class="tab-year" @click="open">
          {{ targetSpecialtyName ? targetSpecialtyName : "专业名称" }}
          <u-icon name="arrow-down-fill" color="#666" size="10"></u-icon>
        </view>

        <!-- <picker
          :range="specialtysList"
          range-key="pname"
          :value="specialtysIndex"
          @change="specialtysChange"
        >
          <view class="tab-year">
            {{
              specialtysIndex != 0
                ? specialtysList[specialtysIndex].pname
                : "专业名称"
            }}
            <u-icon name="arrow-down-fill" color="#666" size="10"></u-icon>
          </view>
        </picker> -->

        <picker
          :range="schoolsList"
          range-key="name"
          :value="schoolsIndex"
          @change="schoolsChange"
        >
          <view class="tab-year">
            {{
              schoolsIndex != 0 ? schoolsList[schoolsIndex].name : "院校名称"
            }}
            <u-icon name="arrow-down-fill" color="#666" size="10"></u-icon>
          </view>
        </picker>

        <picker @change="yearChange" :value="yearIndex" :range="yearArray">
          <view class="tab-year" v-if="year"
            >{{ year }}
            <u-icon name="arrow-down-fill" color="#666" size="10"></u-icon>
          </view>
        </picker>

        <view class="tab-model" v-if="tabShow" @click="tabShow = !tabShow">
        </view>
        <view class="tab-select" v-if="tabShow">
          <view class="left-sel">
            <view
              class="left-item"
              :class="index == leftIndex ? 'left-select' : ''"
              v-for="(item, index) in leftList"
              :key="index"
              @click="tabChange(index)"
            >
              {{ item.name }}
            </view>
          </view>
          <view class="right-sel">
            <view class="right-title">专业目录</view>
            <view class="right-main">
              <view
                class="right-item"
                :class="
                  index === this.leftList[this.leftIndex].rightIndex
                    ? 'select'
                    : ''
                "
                v-for="(item, index) in rightList"
                :key="index"
                @click="rightChange(index)"
              >
                {{ item?.pname }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <scroll-view scroll-y style="height: calc(100vh-130rpx)">
      <view class="table1" v-if="1">
        <view class="item title">
          <!-- <view class="word">{{ `院校名称` }} </view> -->
          <view class="mean">
            <view class="mean-item mean-title">
              <view class="flex-2">{{ `专业名称` }}</view>
              <view class="flex-2">{{ `院校名称` }}</view>
              <view class="flex-2">{{ `考试科目` }}</view>
              <view class="flex-1 title1">{{ `录取分数` }}</view>
              <view class="flex-1 title1">{{ `报考人数` }}</view>
            </view>
          </view>
        </view>
        <template v-for="(item1, index) in specialtyIdPlanList" :key="index">
          <view class="item" @click="">
            <!-- <view class="word">{{ item.name }} </view> -->
            <view class="mean">
              <view
                class="mean-item"
                v-for="(item, index) in item1.admissionPlans"
                :key="index"
              >
              <view class="flex-2">{{ item.targetSpecialtyName }}</view>
              <view class="flex-2">{{ item1.name }} </view>
                <view class="flex-3">
                  <view
                    v-for="(item, index) in item.subjectNames"
                    :key="index"
                    >{{ item }}</view
                  >
                </view>
                <view class="flex-1">{{ item.minAcceptScore || "" }}</view>
                <view class="flex-1">{{ item.examNum }}</view>
              </view>
            </view>
          </view>
        </template>
      </view>
    </scroll-view>

    <uni-popup ref="popup" type="bottom" :safe-area="false">
      <view class="pop-box">
        <view class="tit">专业选择</view>
        <view class="picker">
          <picker-view
            :value="valueArr"
            @change="bindChange"
            @pickstart="moving=true" @pickend="moving=false"
            class="picker-view"
          >
            <picker-view-column>
              <view
                class="item"
                v-for="(item, index) in levelTwoSpecialtys"
                :key="index"
                >{{ item.pname }}</view
              >
            </picker-view-column>
            <picker-view-column>
              <view
                class="item"
                v-for="(item, index) in levelThreeSpecialtys"
                :key="index"
                >{{ item.name }}</view
              >
            </picker-view-column>
          </picker-view>
        </view>
        <view class="save">
          <view class="btn" @click="saveSet">确定</view>
        </view>
      </view>
    </uni-popup>

    <u-popup
      :show="showpopup"
      mode="bottom"
      @close="close"
      :closeOnClickOverlay="true"
    >
      <scroll-view scroll-y style="height: 45vh">
        <view class="flex mt-20 mx-10">
          <view class="flex-1 text-center text-24">
            <text>{{
              this.leftIndex == 0 ? selectItem.name : selectItem.name
            }}</text>
            {{ year }}年专升本招生学校
          </view>
          <picker @change="yearChange" :value="yearIndex" :range="yearArray">
            <view class="w-80 text-24 mr-4">{{ year }}</view>
          </picker>
        </view>
        <view class="table1" v-if="leftIndex == 0">
          <view class="item">
            <view class="word">{{ `学院名称` }} </view>
            <view class="mean">{{ `考试科目` }}</view>
            <view class="right">{{ `录取分数` }}</view>
          </view>
          <template v-for="(item, index) in specialtyIdPlanList" :key="index">
            <view class="item" @click="">
              <view class="word">{{ item.name }} </view>
              <view class="mean">
                <view
                  v-for="(item, index) in item.admissionPlans[0].subjectNames"
                  :key="index"
                  >{{ item }}</view
                >
              </view>
              <view class="right">{{
                item.admissionPlans[0].minAcceptScore
              }}</view>
            </view>
          </template>
        </view>
        <view class="table1" v-if="leftIndex == 1">
          <view class="item">
            <view class="word">{{ `专业名称` }} </view>
            <view class="mean">{{ `考试科目` }}</view>
            <view class="right">{{ `录取分数` }}</view>
          </view>
          <template v-for="(item, index) in qryAdmissionList" :key="index">
            <view class="item" @click="">
              <view class="word">{{ item.targetSpecialtyName }} </view>
              <view class="mean">
                <!-- {{
                item.subjectNames.join(",")
              }} -->
                <view v-for="(item, index) in item.subjectNames" :key="index">{{
                  item
                }}</view>
              </view>
              <view class="right">{{ item.minAcceptScore }}</view>
            </view>
          </template>
        </view>
      </scroll-view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabShow: false,
      tabName: "",
      leftList: [
        {
          name: "全部",
          type: 4,
          rightIndex: "",
        },
        {
          name: "普通本科",
          type: 4,
          rightIndex: "",
        },
        {
          name: "职业本科",
          type: 5,
          rightIndex: "",
        },
      ],
      rightList: [
        {
          pname: "全部",
          pid: "",
        },
      ],
      navList: [],
      rightIndex: 0,
      specialtyIdPlanList: [],
      qryAdmissionList: [],
      leftIndex: 0,
      wordData: "",
      name: "",
      specialtyId: "",
      size: 10,
      current: 1,
      total: 0,
      showpopup: false,
      year: "",
      // yearArray: [2024, 2023],
      yearIndex: 0,
      yearArray: [],
      schoolsIndex: 0,
      schoolsList: [],
      schoolCode: "",
      specialtysIndex: 0,
      specialtysList: [],
      levelTwoSpecialtys: [],
      levelTwoIndex: 0,
      levelThreeSpecialtys: [],
      levelThreeIndex: 0,
      valueArr: [],
      targetSpecialtyId: "",
      targetSpecialtyName: "",
      navObj: {
        schools: [],
      },
      selectItem: {
        id: "",
        specialtyIds: [],
      },
      moving:false,
    };
  },
  async onLoad(options) {
    this.current = 1;
    // console.log("options=", options);
    this.specialtyId = options.specialtyId || "1968";
    await this.getqryYearList();
    this.getList();
    this.getqryAdmissionPlans();
  },
  onShow() {
    // this.getData();
  },
  onReachBottom() {},
  methods: {
    rightChange(i) {
      this.rightIndex = i;
      this.leftList.forEach((item) => (item.rightIndex = -1));
      this.leftList[this.leftIndex].rightIndex = i;
      this.tabName = this.rightList[this.rightIndex]?.pname || "";
      this.targetSpecialtyId = this.rightList[this.rightIndex]?.pid || "";
      this.tabShow = false;
      this.getqryAdmissionPlans();
    },
    tabChange(i) {
      this.leftIndex = i;
      if (i == 0) {
        this.rightList = [
          {
            pname: "全部",
            pid: "",
          },
        ];
      }
      if (i == 1) {
        this.rightList = this.navObj.ptlevelTwoSpecialtys;
      }
      if (i == 2) {
        this.rightList = this.navObj.zylevelTwoSpecialtys;
      }
    },
    tabSelect() {
      this.tabShow = !this.tabShow;
      console.log(this.rightList);
    },
    close() {
      console.log("close=", this.showpopup);
      this.showpopup = false;
    },
    yearChange(e) {
      // if (e.detail.value == this.yearIndex) return;
      // console.log("yearChange=", e);
      this.tabShow = false;
      this.yearIndex = e.detail.value;
      this.year = this.yearArray[this.yearIndex];
      let item = this.selectItem;
      // this.getList();
      this.getqryAdmissionPlans();
    },
    schoolsChange(e) {
      // if (e.detail.value == this.yearIndex) return;
      console.log("e=", e);
      this.tabShow = false;
      this.schoolsIndex = e.detail.value;
      this.schoolCode = this.schoolsList[this.schoolsIndex].schoolCode;
      // this.getList();
      this.getqryAdmissionPlans();
    },
    specialtysChange(e) {
      // if (e.detail.value == this.yearIndex) return;
      // console.log("e=", e);
      this.specialtysIndex = e.detail.value;
      this.targetSpecialtyId = this.specialtysList[this.specialtysIndex].pid;
      this.getqryAdmissionPlans();
    },
    async toStart(item) {
      this.yearIndex = 0;
      this.selectItem = item;
      await this.getqryYearList();
      if (this.leftIndex == 0) {
        this.getqryAdmissionPlanIdList(item.id);
        // this.showpopup=true
      }
      if (this.leftIndex == 1) {
        this.getqryAdmissionPlanList(
          item.schoolCode,
          item.specialtyIds.join(",")
        );
      }
      this.showpopup = true;
    },

    getList(name = "") {
      this.$http
        .get1("/client/undergraduate/qryTargetSpecialtys", {
          specialtyId: this.specialtyId,
          schoolCode: this.schoolCode,
          examType: 12,
        })
        .then((res) => {
          if (res.code == 200) {
            let data = res.data;
            this.navObj = data;
            this.schoolsList.push({ name: "全部", schoolCode: "" });
            this.schoolsList.push(...data.schools);

            // this.specialtysList.push({ pname: "全部", pid: "" });
            // this.specialtysList.push(...data.ptlevelTwoSpecialtys);
            // data.zylevelTwoSpecialtys.forEach(
            //   (item) => (item.pname = item.pname + "(职业本科)")
            // );
            // this.specialtysList.push(...data.zylevelTwoSpecialtys);

            data.levelTwoSpecialtys.forEach((item) => {
              if (item.degreeType == 112) {
                item.pname = item.pname + "(职业本科)";
              }
            });
            this.levelTwoSpecialtys = [
              { pname: "可报专业类目", childrens: [] },
              ...data.levelTwoSpecialtys,
            ];
            // console.log('this.levelTwoSpecialtys=',this.levelTwoSpecialtys)
          }
        });
    },
    getqryAdmissionPlans() {
      this.$http
        .get1("/client/undergraduate/qryAdmissionPlans", {
          sourceSpecialtyId: this.specialtyId,
          schoolCode: this.schoolCode,
          targetSpecialtyId: this.targetSpecialtyId,
          year: this.year,
          examType: 12,
        })
        .then((res) => {
          if (res.code == 200) {
            let data = res.data;
            this.specialtyIdPlanList = data;
          }
        });
    },
    getqryAdmissionPlanIdList(specialtyId = "") {
      this.$http
        .get1("/client/undergraduate/qryAdmissionPlanBySpecialtyId", {
          specialtyId: specialtyId,
          year: this.year,
          examType: 12,
        })
        .then((res) => {
          if (res.code == 200) {
            this.specialtyIdPlanList = res.data;
          }
        });
    },
    // 获取专升本学校招生计划列表
    getqryAdmissionPlanList(schoolCode = "", specialtyIds = "") {
      this.$http
        .get1("/client/undergraduate/qryAdmissionPlan", {
          schoolCode: schoolCode,
          specialtyIds: specialtyIds,
          year: this.year,
          examType: 12,
        })
        .then((res) => {
          if (res.code == 200) {
            this.qryAdmissionList = res.data;
          }
        });
    },
    getqryYearList(name = "") {
      return new Promise((resolve, reject) => {
        this.$http
          .get1("/client/undergraduate/qryYear", {
            examType: 12,
          })
          .then((res) => {
            if (res.code == 200) {
              this.yearArray = res.data;
              // this.yearArray.push(2023);
              this.year = res.data[this.yearIndex] || "";
              resolve();
            }
          });
      });
    },
    open() {
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    bindChange(e) {
      // console.log("e", e.detail.value);
      this.valueArr = e.detail.value;
      if (this.levelTwoIndex != this.valueArr[0]) {
        this.levelTwoIndex = this.valueArr[0];
        this.levelThreeSpecialtys =
          this.levelTwoSpecialtys[this.levelTwoIndex].childrens;
        this.levelThreeIndex = 0;
      }
      if (this.levelThreeIndex != this.valueArr[1]) {
        this.levelThreeIndex = this.valueArr[1];
      }
      this.valueArr = [this.levelTwoIndex, this.levelThreeIndex];
    },
    saveSet() {
      // #ifdef MP-WEIXIN
      // #endif
      if (this.moving) return
      this.targetSpecialtyId =
        this.levelThreeSpecialtys[this.levelThreeIndex]?.id || "";
      this.targetSpecialtyName =
        this.levelThreeSpecialtys[this.levelThreeIndex]?.name || "";
      this.getqryAdmissionPlans();
      this.close();
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f2f3f8;
}
.page {
  padding: 120rpx 4rpx 10rpx;
  box-sizing: border-box;
}
.nav {
  position: fixed;
  display: flex;
  flex-direction: column;
  top: 0;
  left: 0;
  width: 100%;
  height: 120rpx;
  background: #5480f8;
  box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42, 65, 152, 0.05);
  z-index: 1;

  .tab-item {
    position: relative;
    display: flex;
    justify-content: center;
    margin-left: 20rpx;
    margin-top: 10rpx;
    // flex-wrap: wrap;
    .tab-year {
      display: flex;
      min-width: 180rpx;
      // flex: 1;
      height: 78rpx;
      background-color: #f2f2f2;
      border-radius: 10rpx;
      text-align: center;
      justify-content: center;
			align-items: center;
      padding: 0rpx 10rpx;
      margin-right: 20rpx;
      font-size: 24rpx;
    }

    .tab-model {
      position: absolute;
      width: 100vw;
      height: 100vh;
      background-color: #575a64;
      top: 122rpx;
      left: -20rpx;
      opacity: 0.5;
      z-index: 2;
    }
    .tab-select {
      position: absolute;
      opacity: 1;
      display: flex;
      width: 100vw;
      min-height: 200rpx;
      top: 80rpx;
      left: -20rpx;
      padding-top: 16rpx;
      padding-bottom: 50rpx;
      background-color: #fff;
      font-size: 24rpx;
      border-radius: 0rpx 0rpx 20rpx 20rpx;
      box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42, 65, 152, 0.05);
      z-index: 3;
      .left-sel {
        flex: 1;
        background: #f2f3f8;
        text-align: center;
        .left-item {
          padding: 30rpx;
          &.left-select {
            color: #5480f8;
            background-color: #fff;
          }
        }
      }
      .right-sel {
        flex: 3;
        background: #fff;
        display: flex;
        flex-direction: column;

        .right-title {
          display: flex;
          width: 100%;
          height: 48rpx;
          margin-left: 30rpx;
          margin-top: 22rpx;
          // border: 1rpx solid #5480f8;
        }
        .right-main {
          display: flex;
          flex-wrap: wrap;
        }
        .right-item {
          // display: inline-block;
          background-color: #f2f2f2;
          border-radius: 10rpx;
          text-align: center;
          padding: 0rpx 10rpx;
          height: 58rpx;
          margin-left: 20rpx;
          margin-bottom: 20rpx;
          line-height: 58rpx;
          min-width: 100rpx;
          border: 1rpx solid transparent;
          &.select {
            color: #5480f8;
            border: 1rpx solid #5480f8;
          }
        }
      }
    }
  }

  .item {
    flex: 1;
    height: 60rpx;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-bottom: 4rpx solid #fff;
    color: #575a64;
    background-color: #fff;
    .name {
      font-size: 28rpx;
      font-weight: 600;
    }
    .val {
      font-size: 20rpx;
      margin-top: 4rpx;
    }
    &.ac {
      border-bottom: 4rpx solid #5480f8;
      color: #5480f8;
    }
  }
}

.content {
  .item {
    width: 100%;
    min-height: 80rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 8rpx 2rpx rgba(42, 65, 152, 0.05);
    border-radius: 20rpx;
    margin-bottom: 15rpx;
    padding: 1rpx 40rpx;
    .word {
      flex: 1;
      // width: 360rpx;
      font-size: 28rpx;
      color: #333333;
      .word-item {
        background-color: #5480f8;
        margin-right: 12rpx;
        font-size: 24rpx;
        font-weight: 400;
        padding: 4rpx 10rpx;
        margin-top: 10rpx;
      }
    }
  }
}

.table1 {
  padding: 20rpx 0rpx;
  .item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 110rpx;
    background: #ffffff;
    margin-bottom: 0rpx;
    padding: 10rpx 0rpx;
    text-align: center;
    font-size: 22rpx;
    color: #575a64;
    // border: 1rpx solid #eee;
    &.title {
      background-color: #5480f8;
      color: #fff;
    }
    .word {
      flex: 2;
      // border: 1rpx solid #ccc;
    }
    .mean {
      flex: 6;
      display: flex;
      flex-direction: column;
      // width: 350rpx;
      margin-left: 0rpx;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;

      // border: 1rpx solid #ddd;
      .mean-item {
        display: flex;
        align-items: center;
        text-align: center;
        border-bottom: 1rpx solid #eee;
      }
      .mean-title {
        border: 0rpx solid transparent;
        .title1 {
          white-space: nowrap;
          margin-left: 10rpx;
          // background-color: #5480f8
        }
      }
      .right {
        flex: 1;
        // width: 100rpx;
        margin-left: 0rpx;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // white-space: nowrap;
        color: #575a64;
        font-size: 24rpx;
      }
    }
  }
}

.pop-box {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  .tit {
    height: 120rpx;
    text-align: center;
    line-height: 120rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #333333;
  }
  .picker-view {
    height: 300rpx;
    .item {
      border: none;
      color: #5480f8;
      background-color: #f5f8ff;
      font-size: 32rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .save {
    width: 100%;
    height: 124rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      margin: 0 auto;
      width: 626rpx;
      height: 90rpx;
      background: #5480f8;
      border-radius: 46rpx;
      text-align: center;
      line-height: 90rpx;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
    }
  }
}
</style>
